<template>
  <div class="app-container">
    <div class="filter-container" style="height: 680px;">

      <div class="handle-add" style="padding: 80px 30px 30px 60px; display: flex">
        <el-menu default-active="1" style="border: 0; width:25%" class="el-menu-vertical-demo">
          <el-menu-item index="1" @click="active1" style="font-size: 16px">
            <i class="el-icon-info" style="font-size: 22px"></i>
            <span slot="title">修改密码</span>
          </el-menu-item>
          <el-menu-item index="2" @click="active2" style="font-size: 16px">
            <i class="el-icon-menu" style="font-size: 22px"></i>
            <span slot="title">实名认证</span>
          </el-menu-item>
          <el-menu-item index="3" @click="active3" style="font-size: 16px">
            <i class="el-icon-phone" style="font-size: 22px"></i>
            <span slot="title">修改手机号</span>
          </el-menu-item>
        </el-menu>

        <el-form ref="editForm" :rules="rules" :model="dataForm" status-icon label-position="left" v-if="show1"
                 label-width="150px" style="width: 40%; ">
          <el-form-item label="原密码" prop="oldPwd">
            <el-input v-model="dataForm.oldPwd" type="password" placeholder="请输入原密码"/>
          </el-form-item>
          <el-form-item label="新密码" prop="newPwd">
            <el-input v-model="dataForm.newPwd" type="password" auto-complete="off" placeholder="请输入新密码"/>
          </el-form-item>
          <el-form-item label="确认密码" prop="newQw">
            <el-input v-model="dataForm.newQw" type="password" auto-complete="off" placeholder="请输入确认密码"/>
          </el-form-item>
          <el-form-item style="margin-top:60px;">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="change">确定</el-button>
          </el-form-item>
        </el-form>

        <el-form ref="editForm2" :rules="userInfoFules" :model="userInfo2" status-icon label-position="left" v-if="show2"
                 label-width="150px" style="width: 40%;">
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="userInfo2.realName" placeholder="请输入真实姓名"/>
          </el-form-item>
          <el-form-item label="银行账户号" prop="account">
            <el-input v-model="userInfo2.account" placeholder="请输入银行账户号"/>
          </el-form-item>
          <el-form-item label="账户银行标准编码" prop="bankCode">
            <el-input v-model="userInfo2.bankCode" placeholder="请输入账户银行标准编码"/>
          </el-form-item>
          <el-form-item label="短信验证码" prop="checkSms">
            <el-input v-model="userInfo2.checkSms" placeholder="请输入短信验证码"/>
          </el-form-item>
          <el-form-item style="margin-top:60px;">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="change">确定</el-button>
          </el-form-item>
        </el-form>

        <el-form ref="editForm2" :rules="chgphoneFules" :model="userInfo3" status-icon label-position="left" v-if="show3"
                 label-width="150px" style="width: 40%; ">
          <el-form-item label="原手机号" prop="oldMobile">
            <el-input v-model="userInfo3.oldMobile" placeholder="请输入原手机号"/>
          </el-form-item>
          <el-form-item label="新手机号" prop="newMobile">
            <el-input v-model="userInfo3.newMobile" placeholder="请输入新手机号"/>
          </el-form-item>
          <el-form-item label="新手机号短信验证码" prop="checkSms">
            <el-input v-model="userInfo3.checkSms" placeholder="请输入新手机号短信验证码"/>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input v-model="userInfo3.password" type="password" placeholder="请输入登录密码"/>
          </el-form-item>
          <el-form-item style="margin-top:60px;">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="change">确定</el-button>
          </el-form-item>
        </el-form>

      </div>

    </div>
  </div>
</template>

<script>
  import { doGet } from '@/api/index'

  export default {
    name: 'ChangePassword',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.dataForm.newPwd) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        show1: true,
        show2: false,
        show3: false,
        dataForm: {
          oldPwd: '',
          newPwd: '',
          newQw: ''
        },
        rules: {
          oldPwd: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
          newPwd: [
            { required: true, message: '新密码不能为空', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' }
          ],
          newQw: [
            { required: true, message: '确认密码不能为空', trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur' }
          ]
        },
        userInfo2: {
          realName: '',
          account: '',
          bankCode: '',
          checkSms: ''
        },
        userInfoFules: {
          realName: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
          account: [{ required: true, message: '银行账户号不能为空', trigger: 'blur' }],
          bankCode: [{ required: true, message: '账户银行标准编码不能为空', trigger: 'blur' }],
          checkSms: [{ required: true, message: '短信验证码不能为空', trigger: 'blur' }]
        },
        userInfo3: {
          oldMobile: '',
          newMobile: '',
          checkSms: '',
          password: ''
        },
        chgphoneFules: {
          oldMobile: [{ required: true, message: '原手机号不能为空', trigger: 'blur' }],
          newMobile: [{ required: true, message: '新手机号不能为空', trigger: 'blur' }],
          checkSms: [{ required: true, message: '新手机号短信验证码不能为空', trigger: 'blur' }],
          password: [{ required: true, message: '登录密码不能为空', trigger: 'blur' }]
        },
      }
    },
    methods: {
      cancel() {
        this.dataForm = {
          oldPwd: '',
          newPwd: '',
          newQw: ''
        }
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      change() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            doGet('chgpwd.html', this.dataForm) .then(response => {
              this.cancel()
              this.$notify.success({
                title: '成功',
                message: '修改密码成功'
              })
            }).catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.message
              })
            })
          }
          /*changePassword(this.dataForm).then(response => {
			this.$notify.success({
			  title: '成功',
			  message: '修改密码成功'
			})
		  }).catch(response => {
			this.$notify.error({
			  title: '失败',
			  message: response.data.errmsg
			})
		  })*/
        })
      },
      active1() {
        if(this.show1 = true) {
          this.show2 = false
          this.show3 = false
        }
      },
      active2() {
        if (this.show2 = true) {
          this.show1 = false
          this.show3 = false
        }
      },
      active3() {
        if (this.show3 = true){
          this.show1 = false
          this.show2 = false
        }
      },
    }
  }
</script>
